<!-- 以往公益记录 -->
<template>
  <div id="previous">
    <div class="center">
      <NavTitle>
        <template #left>
          <div class="title">以往公益记录</div>
          <div class="info">PAST RECORDS</div>
        </template>
      </NavTitle>
      <div class="lists">
        <template v-for="item in state.articleList" :key="item._id">
          <div
            class="list"
            :style="{
              backgroundImage: 'url(' + item.cover + ')',
              backgroundSize: '100% auto',
              backgroundRepeat: 'no-repeat'
            }"
          >
            <div class="mark"></div>
            <div class="animate">
              <div class="time" v-format-time="'MM-DD'">{{ item.time }}</div>
              <div class="tit">
                <a :href="'/article/' + item._id" target="_blank">{{
                  item.title
                }}</a>
              </div>
              <div class="br"></div>
              <div class="des">
                {{ item.des }}
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { NavTitle } from '@/components/client/public'
import {
  getEffectData,
  ArticleListDataTypes
} from '@/server/client/api_article'

const state = reactive({
  articleList: [] as Array<ArticleListDataTypes>,
  backgroud: {}
})

const { data: articleList } = await getEffectData(2, 4)
state.articleList = articleList.data.articleList
</script>

<style scoped lang="less">
#previous {
  margin-top: -80px;
  background-color: #fafafa;
  padding: 80px 0;
  .center {
    width: 1200px;
    margin: 0 auto;
  }
  .lists {
    display: flex;
    justify-content: space-between;
    .list {
      width: 300px;
      height: 533px;
      background-color: #fff;
      z-index: 1;
      box-sizing: border-box;
      position: relative;
      transition: all 3s;
      &:hover {
        .mark {
          opacity: 0;
        }
        .animate {
          top: 70%;
          .tit {
            a {
              color: #ffffff;
            }
          }
          .br {
            color: #999999;
          }
        }
      }
      .mark {
        width: 100%;
        height: 100%;
        background: #fff;
        position: absolute;
        opacity: 1;
        transition: all 0.3s;
      }
      .animate {
        width: 220px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        transition: all 0.3s;

        .time {
          color: #999;
          font-size: 14px;
        }
        .tit {
          width: 220px;
          color: #444;
          font-size: 16px;
          margin: 10px 0 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          a {
            color: #444;
          }
        }
        .br {
          width: 34.57px;
          height: 0.5px;
          background-color: #eeeeee;
          margin: 10px 0 30px;
        }
        .des {
          color: #777;
          font-size: 14px;
          line-height: 2;
        }
      }
    }
  }
}
</style>
